<template>
  <div class="infoBox flex align-center">
    <div class="flex align-center">
      <img :src="dataBaseImg" alt="">
      <span>{{currentDatabase}}</span>
    </div>
    <div class="flex align-center">
      <img :src="dataLinkImg" alt="">
      <span>192.168.1.139</span>
    </div>
    <div class="flex align-center">
      <img :src="userImg" alt="">
      <span>root</span>
    </div>
    <div class="flex align-center">
      <img :src="statusImg" alt="">
      <span>Connected</span>
    </div>
    <div class="flex align-center">
      <img :src="dataBaseTypeImg" alt="">
      <span>MySQL 5.7.40</span>
    </div>
    <div class="flex align-center">
      <img :src="timeImg" alt="">
      <span>a minute ago</span>
    </div>
  </div>
</template>
<script>
import {mapGetters} from "vuex";

export default {
  name: 'Info',
  data() {
    return {
      dataBaseImg: './static/img/footer01.png',
      dataLinkImg: './static/img/footer02.png',
      userImg: './static/img/footer03.png',
      dataBaseTypeImg: './static/img/footer04.png',
      timeImg: './static/img/footer05.png',
      statusImg: './static/img/footer06.png',
    }
  },
  computed: {
    ...mapGetters(['currentDatabase'])
  }
}
</script>
<style lang="scss" scoped>
.infoBox{
  height: 100%;
  >div{
    margin-right: 20px;
    img{
      width: 16px;
      margin-right: 5px;
      display: block;
    }
    span{
      font-size: 14px;
      color: #fff;
    }
  }
}
</style>
